<template>
  <section class="main-header">
    <div class="header-content">
      <router-link :to="{name:'home'}">
        <img class="logo" src="./../assets/logo.png" alt="">
      </router-link>
 <el-menu :default-active = "activeIndex"
    class="m-r-20 header-nav"
    mode = "horizontal"
    @select="handleSelect">
      <el-menu-item index="1">首页</el-menu-item>
      <el-menu-item index="2">发现</el-menu-item>
      <el-menu-item index="3">话题</el-menu-item>
    </el-menu>
      <!-- 搜索主体部分 -->
      <div class="search-box">
        <el-input size="small" class="search m-r-10" placeholder="请输入内容" v-model="keywords"></el-input>
        <el-button size="small" type="primary" class="main-btn">提问</el-button>
      </div>
      <div class="userInfo" v-if="!isLogin">
        <router-link :to="{name:'signup'}">登录</router-link>
      </div>
      <!-- 用户信息部分 -->
      <div class="userInfo" v-if="isLogin">
        <!-- 消息提示icon -->
        <i class="el-icon-bell m-r-40 icon-item"></i>
        <i class="el-icon-message m-r-40 icon-item"></i>
        <!-- 下拉菜单 -->
        <el-dropdown placement="bottom" trigger="click" class="hand-click">
          <span class="avator">
            <img src="./../assets/images/csh01.jpg" alt="" >
          </span>
          <el-dropdown-menu>
              <el-dropdown-item>
                <div @click="goToPersonalPage">
                  <span class="el el-icon-fakezhihu-person"></span>
                  我的主页
                </div>
              </el-dropdown-item>
              <el-dropdown-item divided>
                <i class="el-icon-setting">设置</i>
              </el-dropdown-item>
              <el-dropdown-item divided>
                <div @click="loginout">
                  <span class="el el-icon-fakezhihu-poweroff"></span>
                  退出
                </div>
              </el-dropdown-item>
          </el-dropdown-menu>
          
        </el-dropdown>
      </div>
    </div>
    <!-- 其他内容 -->
   
   
  </section>
</template>

<script>
export default {
  name: 'MainHeader',
  data() {
    return {
      activeIndex: '1',
      keywords:'',
      isLogin: true
    }
  },
  components: {},
  watch: {},
  mounted() {},
  methods: {
    handleSelect(key){
      console.log(key); //单击菜单输出当前Index
    },
    goToPersonalPage(){
      console.log("跳转到用户首页")
    },
    loginout(){
      this.isLogin= false;
      console.log("退出");
    }
  }
}
</script>
